<!--
	必填 fileData自定义，父组件绑定list
		uploading:有loading效果的需加上
		removeFile：有删除功能的需加上 
	<imageUpload style='width: 112px;height: 112px' :fileList='fileData' v-on:uploading='($event)=>{fileData = $event}' v-on:removeFile='(e)=>removeFile_fromList(e,fileData) '></imageUpload>  -->
<template> 
	<div>
		<a-upload
	      :action="uploadAddress"
	      listType="picture-card"
	      :fileList="fileList"
	      @preview="handlePreview"
	      @change="handleChange"
	      :remove='removeFile'
	    >
	      <div v-if="fileList.length < showImageNum">
	        <a-icon type="plus" />
	        <div class="ant-upload-text">Upload</div>
	      </div>
	    </a-upload>
	    <a-modal :visible="previewVisible" :footer="null"  @cancel="previewVisible = false">
	        <img alt="example" style="width: 100%" :src="previewImage" />
	    </a-modal>
    </div>
</template>

<script >
 function getBase64(file) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => resolve(reader.result);
      reader.onerror = error => reject(error);
    });
  }
import { download_file }  from '@/api/common'
 	export default {
		name:'imageUpload',
		props:{ 
			// 已经上传的文件列表（受控
			fileList:{
				type:[Object,Array],
				default:()=>[]
			}, 
			//上传图片最大数
			showImageNum:{
				type:Number,
				default:1
			},
		 
		},
		data(){
			return {
				uploadAddress:process.env.BASE_API+'/op/fileupload/upload_file',/*upload_requesturl*/
				previewVisible: false,
        		previewImage: '',   
				// headers:{/*仅支持ie10+*/
				// 	'X-Token':sessionStorage.getItem('token')
				// } 
			}
		},
		created(){ 

		},
		methods:{  
		    async handlePreview(file) {
		        if (!file.url && !file.preview) {
		            file.preview = await getBase64(file.originFileObj);
		        }
		        this.previewImage = file.url || file.preview;
		        this.previewVisible = true;
		    },
		    handleChange({ file,fileList }) { 
		    	if(file.status == 'uploading'){
		    		this.$emit('uploading',fileList)
		    	}
		        
		        if(file.status == 'done'){ 
		        	//为了使更多组件通用，传两个参数，取需要的参数
		        	this.$emit('uploadSuccess',file,fileList)
		        	this.$message.success('上传成功')
		        }
		        if(file.status == 'error'){
		        	this.$message.success('上传出问题啦，请稍后再尝试！')
		        }
		        
		    },
		    removeFile(file){  
		    	let code = file.response ? file.response.data.code : file.code 
		    	this.$emit('removeFile',code)
		    }
		}
	}
</script>
<style scoped="scoped">
	.ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }
</style>